<!--test.vue-->
<template>
	<div id="echartId" style="width: 100%;height:100%">
  	<v-chart ref="echarts" class="chart" :option="option" :key="key" />
	</div>
</template>

<script>
 import { use } from "echarts/core";
	import { CanvasRenderer } from "echarts/renderers";
	import { PieChart } from "echarts/charts";
	import {
		TitleComponent,
		TooltipComponent,
		LegendComponent
	} from "echarts/components";

	use([
  CanvasRenderer,
  PieChart,
  TitleComponent,
  TooltipComponent,
  LegendComponent
]);
	export default {
		name: 'BarCharts',
		props: {
			barOptions: {
				type: Object,
        default: () => {
					const Obj = {
							title: {
									text: '某站点用户访问来源',
									subtext: '纯属虚构',
									left: 'center'
							},
							tooltip: {
									trigger: 'item'
							},
							legend: {
									orient: 'vertical',
									left: 'left',
							},
							series: [
									{
											name: '访问来源',
											type: 'pie',
											radius: '50%',
											data: [
													{value: 1048, name: '搜索引擎'},
													{value: 735, name: '直接访问'},
													{value: 580, name: '邮件营销'},
													{value: 484, name: '联盟广告'},
													{value: 300, name: '视频广告'}
											],
											emphasis: {
													itemStyle: {
															shadowBlur: 10,
															shadowOffsetX: 0,
															shadowColor: 'rgba(0, 0, 0, 0.5)'
													}
											}
									}
							]
					};

					return Obj
				}
      }
		},
		watch: {
			barOptions: {
				handler(val) {
					console.log('barOptions', val)
					this.option = val
				},
				deep: true,
				immediate: true
			}
		},
    data(){
			return {
				option: {},
				key: 1
      }
    },
		mounted() {
			let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
			let element = document.getElementById('echartId')
			this.observer = new MutationObserver((mutationList) => {
				for (let mutation of mutationList) {
					console.log(mutation)
				}
				console.log('自适应')
				// this.$refs['echarts'].resize()
				this.key+=1
			})
			this.observer.observe(element, { attributes: true, attributeFilter: ['style'], attributeOldValue: true })
		},
		beforeDestroyed () {
			if (this.observer) {
				this.observer.disconnect()
				this.observer.takeRecords()
				this.observer = null
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
